<template>
  <p-modal
    v-model="visible"
    :mask-closable="false"
    :confirm-loading="confirmLoading"
    :width="600"
    title="配置项"
    @ok="onOk"
  >
    <p-table
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :row-selection="{selectedRowKeys, onChange, onSelect, onSelectAll}"
      row-key="scanType"
      size="middle"
      bordered
    >
      <template slot="action" slot-scope="text, record, index">
        <p-button :disabled="index === 0" icon="arrow-up" @click="rankUp(index)" />
        <p-button :disabled="index === dataSource.length - 1" class="ml10" icon="arrow-down" @click="rankDown(index)" />
      </template>
    </p-table>
  </p-modal>
</template>

<script>
import modalMixin from '@/mixins/modalMixin'
import { getAction, postAction } from '@/api/manage'
import configOptions from './configOptions'

export default {
  mixins: [modalMixin],
  props: {
    type: {
      type: String,
      required: true
    },
    stationCode: String
  },
  data() {
    return {
      confirmLoading: false,
      loading: false,
      selectedRowKeys: [],
      dataSource: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          align: 'center',
          width: 80,
          customRender(text, record, index) {
            return index + 1
          }
        },
        {
          title: '步骤',
          dataIndex: 'scanDesc',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 120,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ]
    }
  },
  methods: {
    initValue() {
      this.visible = this.value
      if (this.visible) {
        if (!this.stationCode) {
          this.$message.warning('工站不能为空')
          return
        }
        this.getData()
      }
    },
    onChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onSelect(record, selected, selectedRows) {
      const { sort } = record
      if (selected) {
        this.updateSelectedStatus(selectedRows)
      } else {
        record.scanStatus = 0
        record.sort = 9999
        selectedRows.forEach(item => {
          if (item.sort > sort) {
            item.sort--
          }
        })
      }
    },
    onSelectAll(selected, selectedRows) {
      if (selected) {
        this.updateSelectedStatus(selectedRows)
      } else {
        this.dataSource.forEach(item => {
          item.scanStatus = 0
          item.sort = 9999
        })
      }
    },
    updateSelectedStatus(selectedRows) {
      const items = this.dataSource.filter(item => item.scanStatus)
      let total = items.length
      selectedRows.forEach(item => {
        if (!item.scanStatus) {
          ++total
          item.scanStatus = 1
          item.sort = total
        }
      })
    },
    getData() {
      if (!this.type) {
        this.$message.warning('类型不能为空')
        this.dataSource = []
        return
      }
      this.loading = true
      const { type, stationCode } = this
      const params = {
        type,
        stationCode
      }
      const selectedRowKeys = []
      const dataSource = [...configOptions]
      getAction('/basic-business/mfScanRuleSet/getScanRuleList', params).then(res => {
        if (res.data) {
          dataSource.forEach(item => {
            const one = res.data.find(data => data.scanType === item.scanType)
            if (one) {
              item.id = one.id
              item.sort = one.sort
              item.scanStatus = one.scanStatus
              selectedRowKeys.push(item.scanType)
            }
          })
          dataSource.sort((a, b) => {
            if (a.sort < b.sort) {
              return -1
            } else if (a.sort > b.sort) {
              return 1
            } else {
              return 0
            }
          })
        }
        this.selectedRowKeys = selectedRowKeys
        this.dataSource = dataSource
        this.loading = false
      })
    },
    onOk() {
      let items = this.dataSource.filter(item => item.scanStatus)
      if (!items.length) {
        this.$message.warning('请先选择扫码步骤')
        return
      }
      this.confirmLoading = true
      items.forEach((item, index) => {
        item.sort = index + 1
        item.type = this.type
        item.stationCode = this.stationCode
      })
      postAction('/basic-business/mfScanRuleSet/saveScanRuleSet', items).then(res => {
        this.confirmLoading = false
        if (res.data) {
          this.$message.success('配置项设置成功')
          this.$emit('success')
          this.visible = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    rankUp(index) {
      const dataSource = [...this.dataSource]
      const prev = dataSource[index - 1]
      const current = dataSource[index]
      dataSource[index] = prev
      dataSource[index - 1] = current
      this.dataSource = dataSource
    },
    rankDown(index) {
      const dataSource = [...this.dataSource]
      const current = dataSource[index]
      const next = dataSource[index + 1]
      dataSource[index] = next
      dataSource[index + 1] = current
      this.dataSource = dataSource
    }
  }
}
</script>
